<template>
	<view class="hx-navbar">
		<view :class="{'hx-navbar--fixed': fixed,'hx-navbar--shadow':shadow,'hx-navbar--border':border}" :style="{'background': backgroundColorRgba}"
		 class="hx-navbar__content">
			<block v-if="backgroundImg">
				<image class="navbgimg" :src="backgroundImg" mode=""></image>
			</block>
			<view :style="{ height: statusBarHeight ,'background': statusBarBackground}" class="hx-status-bar" v-if="statusBar"></view>
			<view :style="{color:colorInfo,height: height,'line-height':height}" class="hd hx-navbar__header hx-navbar__content_view">
				<view class="hx-navbar__header-btns hx-navbar__content_view" @tap="onClickLeft" v-if="leftSlot" :style="{'color': colorInfo}">
					<block v-if="leftText.length || leftIcon.length || back">
						<view v-if="leftIcon.length || back" :class="back ? 'left_back' : ''" class="hx-navbar__content_view">
							<u-icon :name="back ? 'arrow-left' : leftIcon" :color="colorInfo" size="28"></u-icon>
						</view>
						<view v-if="leftText.length" :class="{'hx-navbar-btn-icon-left':!leftIcon.length}" class="hx-navbar-btn-text hx-navbar__content_view">{{ leftText }}</view>
					</block>
					<block v-else>
						<slot name="leftAfter" v-if="leftSlidiSwitch && slotSlidiSwitch == 1" />
						<slot name="left" v-else />
					</block>
				</view>
				<view class="hx-navbar__header-container hx-navbar__content_view">
					<view v-if="title.length" class="hx-navbar__header-container-inner hx-navbar__content_view">{{ title }}</view>
					<!-- 标题插槽 -->
					<block v-else>
						<slot name="centerAfter" v-if="centerSlidiSwitch && slotSlidiSwitch == 1" />
						<slot v-else />
					</block>
				</view>
				<view :class="title.length?'hx-navbar__header-btns-right':''" class="hx-navbar__header-btns hx-navbar__content_view"
				 @tap="onClickRight" v-if="rightSlot">
					<!-- 优先显示图标 -->
					<block v-if="rightIcon.length || rightText.length">
						<view class="hx-navbar__content_view" v-if="rightIcon.length">
							<u-icon :name="rightIcon" :color="colorInfo" size="28"></u-icon>
						</view>
						<view v-if="rightText.length" class="hx-navbar-btn-text hx-navbar__content_view">{{ rightText }}</view>
					</block>
					<block v-else>
						<slot name="rightAfter" v-if="rightSlidiSwitch && slotSlidiSwitch == 1" />
						<slot name="right" v-else />
					</block>
				</view>
			</view>
		</view>
		<view v-if="placeholder" class="hx-navbar__placeholder">
			<view :style="{ height: statusBarHeight}" class="hx-status-bar" v-if="statusBar"></view>
			<view :style="{ height: height}" />
		</view>
	</view>
</template>

<script>
	//获取系统状态栏高度
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		name: "hx-navbar",
		data() {
			return {
				statusBarHeight: statusBarHeight,
				transparentValue: 0,
				navTransparentFixedFontColor: '#fff',

				statusBarFontColorInfo: [],
				backgroundColorRgba: 'rgba(255,255,255,1)',
				backgroundColorRgb: 'rgb(222,222,222)',
				colorInfo: '#000000',
				placeholder: false,
				colorContainer: null,
				slotSlidiSwitch: 0

			};
		},
		props: {
			height: {
				type: String,
				default: "44px"
			},
			//导航栏占位符 显示（show），隐藏（hidden），自动（auto：如果头部为固定fiexd ，则显示占位符）
			barPlaceholder: {
				type: String,
				default: "auto"
			},
			//返回上一页
			back: {
				type: [Boolean, String],
				default: true
			},
			//标题
			title: {
				type: String,
				default: ''
			},
			//是否开启左插槽
			leftSlot: {
				type: [Boolean, String],
				default: true
			},
			//是否开启右插槽
			rightSlot: {
				type: [Boolean, String],
				default: true
			},

			//左边文字
			leftText: {
				type: String,
				default: ''
			},
			//右插槽文字
			rightText: {
				type: String,
				default: ''
			},
			//左插槽图标
			leftIcon: {
				type: String,
				default: ''
			},
			//右插槽图标
			rightIcon: {
				type: String,
				default: ''
			},
			//是否固定头
			fixed: {
				type: [Boolean, String],
				default: false
			},
			//文字颜色
			color: {
				type: [Array, String],
				default: "#000000"
			},
			//导航栏背景颜色
			backgroundColor: {
				type: Array,
				default: function() {
					return new Array([255, 255, 255], [255, 255, 255]);
				}
			},
			//线性渐变角度
			backgroundColorLinearDeg: {
				type: String,
				default: '45'
			},
			//背景图片
			backgroundImg: {
				type: String,
				default: ''
			},
			//背景透明（show,hidden,auto）
			transparent: {
				type: String,
				default: 'show'
			},
			//状态栏字体颜色，只支持黑（#000000）和白（#FFFFFF）两种颜色。（,）
			statusBarFontColor: {
				type: [Array, String],
				default: function() {
					return new Array("#000000", "#000000");
				}
			},
			//是否包含状态栏
			statusBar: {
				type: [Boolean, String],
				default: true
			},
			//状态栏背景颜色
			statusBarBackground: {
				type: String,
				default: ''
			},
			//导航栏阴影
			shadow: {
				type: [String, Boolean],
				default: false
			},
			//导航栏边框
			border: {
				type: [String, Boolean],
				default: false
			},
			//跳至普通页面
			defaultBackUrl: {
				type: String,
				default: ''
			},
			//跳至tabber页面
			backTabbarUrl: {
				type: String,
				default: '/pages/index/index'
			},
			//滑动后切换左插槽
			leftSlidiSwitch: {
				type: [Boolean, String],
				default: false,
			},
			//滑动后切换中间插槽
			centerSlidiSwitch: {
				type: [Boolean, String],
				default: false
			},
			//滑动后切换右插槽
			rightSlidiSwitch: {
				type: [Boolean, String],
				default: false
			},
			//页面的onPageScroll
			pageScroll: {
				type: Object,
				default: function() {
					return {}
				}

			},

		},
		created() {
			var that = this;
			//是否添加占位符
			switch (that.barPlaceholder) {
				case 'show':
					that.placeholder = true
					break
				case 'hidden':
					that.placeholder = false
					break
				case 'auto':
					if (that.fixed) {
						that.placeholder = true
					}
					break;
			}

			//设置状态栏文字颜色
			that.setStatusBarFontColor();

			//文字颜色
			that.colorContainer = typeof that.color == 'object' ? that.color : [that.color, that.color]
			that.colorInfo = that.colorContainer[0]
			//导航栏透明设置 及监听滚动
			switch (that.transparent) {
				case 'show':
					that.transparentValue = 1
					break
				case 'hidden':
					that.transparentValue = 0
					break
				case 'auto':
					that.setTVAuto(that.pageScroll)
					break
			}
			that.setBgColor()

			//滑动切换
			if (that.fixed && (that.leftSlidiSwitch || that.centerSlidiSwitch || that.rightSlidiSwitch)) {
				that.doScroll(that.pageScroll)
			}

		},
		watch: {
			pageScroll(val, oldVal) {
				var that = this
				//导航栏透明设置 及监听滚动
				switch (that.transparent) {
					case 'show':
						that.transparentValue = 1
						break
					case 'hidden':
						that.transparentValue = 0
						break
					case 'auto':
						this.setTVAuto(val)
						break
				}
				//滑动切换
				if (that.fixed && (that.leftSlidiSwitch || that.centerSlidiSwitch || that.rightSlidiSwitch)) {
					that.doScroll(val)
				}
			},
			//监控透明度变化 
			transparentValue(val, oldVal) {
				var that = this
				//this.settingColor()

				//头条小程序不支持setNavigationBarColor方法
				// #ifndef MP-TOUTIAO || H5
				if (oldVal > 0.8) {
					uni.setNavigationBarColor({
						frontColor: that.statusBarFontColorInfo[1],
						backgroundColor: that.backgroundColorRgb
					})
				} else if (oldVal < 0.2) {
					uni.setNavigationBarColor({
						frontColor: that.statusBarFontColorInfo[0],
						backgroundColor: that.backgroundColorRgb
					})
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (tt.setNavigationBarColor) {
					if (oldVal > 0.8) {
						tt.setNavigationBarColor({
							frontColor: that.statusBarFontColorInfo[1],
							backgroundColor: that.backgroundColorRgb,
							success(res) {},
							fail(res) {}
						});
					} else if (oldVal < 0.2) {
						tt.setNavigationBarColor({
							frontColor: that.statusBarFontColorInfo[0],
							backgroundColor: that.backgroundColorRgb,
							success(res) {},
							fail(res) {}
						});
					}
				} else {
					console.log("hx-navbar 提示：当前客户端版本过低，无法使用状态栏颜色修改功能，请升级（基础库1.40+）。")
				}
				// #endif
			},
			//监听背景颜色
			backgroundColor(val, old) {
				var that = this
				that.setBgColor()
			},

			color(val, old) {
				var that = this
				//文字颜色
				/* that.colorContainer = typeof val == 'object' ?  val : [val,val]
				that.colorInfo = that.colorContainer[0]; */

			}
		},
		methods: {

			onClickLeft() {
				if (this.back) {
					if (getCurrentPages().length > 1) {
						uni.navigateBack();
					} else {
						// #ifdef H5
						history.back()
						// #endif
						// #ifndef H5
						if (this.defaultBackUrl) {
							uni.redirectTo({
								url: this.defaultBackUrl
							})
						} else {
							if (this.backTabbarUrl) {
								uni.reLaunch({
									url: this.backTabbarUrl
								});
							}

						}
						// #endif
					}

				} else {
					this.$emit('click-left')
				}
			},
			onClickRight() {
				this.$emit('click-right')
			},

			//监听滚动后的操作
			doScroll(e) {
				let that = this
				that.$emit('scroll', e)
				if (e.scrollTop > 100) {
					that.slotSlidiSwitch = 1
				} else {
					that.slotSlidiSwitch = 0
				}
			},
			//滑动渐变
			setTVAuto(e) {
				let that = this
				that.$emit('scroll', e)
				if (e.scrollTop > 100) {
					that.transparentValue = 1
					that.colorInfo = that.colorContainer[1]
				} else {
					that.transparentValue = e.scrollTop / 100
					that.colorInfo = that.colorContainer[0]
				}
				that.setBgColor()
			},
			//背景颜色
			setBgColor() {

				var that = this
				//如果存在背景图片则背景颜色失效
				// if(that.backgroundImg){
				// 	that.backgroundColorRgba = "url(" + that.backgroundImg + ")"
				// 	return
				// }

				//背景颜色
				if (typeof that.backgroundColor[0] == 'object') {
					let l = that.backgroundColor.length
					if (l >= 2) {
						let rgbStr = "linear-gradient(" + that.backgroundColorLinearDeg + "deg,"
						let c = null
						for (var i in that.backgroundColor) {
							c = that.backgroundColor[i]
							rgbStr += "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + that.transparentValue + ")"

							if (l != (i * 1) + 1) {
								rgbStr += ","
							}
						}
						rgbStr += ")"
						that.backgroundColorRgba = rgbStr
					}

				} else {
					let rgbStr = that.backgroundColor[0] + ',' + that.backgroundColor[1] + ',' + that.backgroundColor[2]
					that.backgroundColorRgb = 'rgb(' + rgbStr + ')'
					that.backgroundColorRgba = 'rgba(' + rgbStr + ',' + that.transparentValue + ')'
				}
			},
			setStatusBarFontColor() {
				var that = this
				if (typeof that.statusBarFontColor == 'string') {
					that.statusBarFontColorInfo = [that.statusBarFontColor, that.statusBarFontColor]
				} else if (typeof that.statusBarFontColor == 'object') {
					if (that.statusBarFontColor.length == 1) {
						that.statusBarFontColorInfo = [that.statusBarFontColor[0], that.statusBarFontColor[0]]
					} else if (that.statusBarFontColor.length >= 2) {
						that.statusBarFontColorInfo = [that.statusBarFontColor[0], that.statusBarFontColor[1]]
					}
				}
				// #ifndef MP-TOUTIAO || H5
				uni.setNavigationBarColor({
					frontColor: that.statusBarFontColorInfo[0],
					backgroundColor: that.backgroundColorRgb
				});
				// #endif

				// #ifdef MP-TOUTIAO
				if (tt.setNavigationBarColor) {
					tt.setNavigationBarColor({
						frontColor: that.statusBarFontColorInfo[0],
						backgroundColor: that.backgroundColorRgb
					});
				} else {
					console.log("hx-navbar 提示：当前客户端版本过低，无法使用状态栏颜色修改功能，请升级（基础库1.40+）。")
				}
				// #endif
			}

		},
		destroyed() {

		},
	}
</script>

<style lang="scss">
	$nav-height: 44px;

	.hd {
		overflow: hidden;
	}

	//防止其他ui影响
	.hx-navbar uni-view,
	.hx-navbar uni-scroll-view,
	.hx-navbar uni-swiper,
	.hx-navbar uni-button,
	.hx-navbar uni-input,
	.hx-navbar uni-textarea,
	.hx-navbar uni-label,
	.hx-navbar uni-navigator,
	.hx-navbar uni-image {
		box-sizing: unset;
	}

	.hx-navbar {
		position: relative;
		padding-top: 0;
		overflow: hidden;

		&__content {
			display: block;
			position: relative;
			width: 100%;
			/*ba#ff6436r: $uni-bg-color*/
			;
			overflow: hidden;

			.navbgimg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				width: 100%;
			}

			.hx-navbar__content_view {
				// line-height: $nav-height;
				display: flex;
				align-items: center;

			}

			.hx-status-bar {
				display: block;
				width: 100%;
				height: 40px;
				height: var(--status-bar-height);
				position: relative;
				z-index: 1;
			}
		}

		&__header {
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: row;
			width: 100%;
			height: $nav-height;
			line-height: $nav-height;
			font-size: 36upx;
			transition: color 0.5s ease 0s;

			&-btns {
				display: inline-flex;
				flex-wrap: nowrap;
				justify-content: center;
				flex-shrink: 0;
				min-width: 48px;
				font-size: 14px;
				text-align: center;
				box-sizing: border-box;
			}

			&-container {
				width: 100%;
				margin: 0 10upx;

				&-inner {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 36upx;

					// padding-right: 60upx;
				}
			}
		}

		&__placeholder {
			&-view {
				height: $nav-height;
			}
		}

		&--fixed {
			position: fixed;
			top: 0;
			z-index: 998;
		}

		&--shadow {
			box-shadow: 0 2upx 12upx #ccc;
		}

		&--border:after {
			position: absolute;
			z-index: 3;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1px;
			content: '';
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #efefef;
		}
	}

	.left_back {
		padding-left: 12upx;
		padding-right: 12upx;
	}
</style>
